<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="详情">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="">
			<view class="scroll-view-item_H">
				<view class="d-flex gs-list">
					<image class="touxiang-img" :src="info_txt.user.avatar" mode="widthFix"></image>
					<view class="">
						<view class="name-t">{{info_txt.userinfo.name}}</view>
						<view class="d-flex">
							<view class="shenfen">{{info_txt.group.name}}</view>
						</view>

					</view>
				</view>
				<view class="geyan">{{info_txt.diyinfo.content}}</view>
				<view class="type-list d-flex align-items">
					<view class="type-list-m" v-if="info_txt.diyinfo.renshu">需要{{info_txt.diyinfo.renshu}}人</view>
					<view class="type-list-m" v-if="info_txt.diyinfo.gongqi">工期{{info_txt.diyinfo.gongqi}}天</view>
					<view class="type-list-m" v-if="info_txt.diyinfo.gongzhongname">{{info_txt.diyinfo.gongzhongname}}</view>
				</view>
				<view class="pinglun">
					<view class="company-t d-flex align-items">
						<text>{{info_txt.shijian}}</text>
						<text v-if="info_txt.cityname">·</text>
						<text v-if="info_txt.cityname">{{info_txt.cityname}} {{info_txt.areaname}}</text>
					</view>
					<view class="d-flex align-items justify-content-space-between ">
						<view class="d-flex align-items">
							<view class="d-flex align-items pinglun-magin" @click="pinglun_list(info_txt)">
								<image class="pinlun" src="../static/pinlun_icon@1x.png" mode="widthFix"></image>
								<view class="plnum">{{info_txt.pinglun}}</view>
							</view>
							<view class="d-flex align-items" @click="dianzan_click">
								<image class="pinlun" v-if="info_txt.is_zan == 1" src="../static/dainzan_yd_icon@1x.png"
									mode="widthFix"></image>
								<image class="pinlun" v-else src="../static/dainzan_icon@1x.png" mode="widthFix">
								</image>
								<view :class="info_txt.is_zan == 1 ? 'plnum_xz' : 'plnum'">{{info_txt.zan}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 回复框 -->
		<view class="huifu" v-for="(pinglun,index) in pinglunlist" :key="index">
			<view class="huifu-w d-flex justify-content-space-between">
				<view class="d-flex align-items">
					<image class="hf-avart" :src="pinglun.user.avatar" mode=""></image>
					<view class="">
						<view class="hf-name">{{pinglun.user.nickname}}</view>
						<view class="">
							<u-rate :count="count" readonly active-color="#FBA808" v-model="pinglun.star"></u-rate>
						</view>
					</view>
				</view>
				<view class="time">{{pinglun.shijian}}</view>
			</view>
			<view class="d-flex juse-huifu">
				<view class="huifu-list d-flex align-items">
					<view class="huifu-content">{{pinglun.content}}</view>
					<view class="hf-btn" @click="huifu_next(pinglun)">回复</view>
				</view>
			</view>
			<view class="d-flex">
				<view class="zuozhe" v-for="(huifu, index) in pinglun.next_comment" :key="index">
					<view class="d-flex align-items">
						<view class="zuozhe-tit">{{huifu.user.nickname}}</view>
						<view class="zuozhe-btn">作者</view>
					</view>
					<view class="content-zz">{{huifu.content}}</view>
					<view class="d-flex align-items">
						<view class="time">{{huifu.shijian}}</view>
						<!-- <view class="hf-btn" @click="huifu_next_next(huifu)">回复</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="foot_btn d-flex align-items justify-content-center">
			<view class="foot_btn-but">
				<u-button text="获取联系方式" @click="get_phone" color="#FF6400"></u-button>
			</view>
		</view>
		<!-- 获取电话弹窗 -->
		<view class="">
			<u-popup :show="show_pop" round="10" :safeAreaInsetBottom="false" mode="center" @close="close">
				<view class="get_phone">
					<view class="phone-t">联系方式</view>
					<view class="" v-if="cishu.shengyu !== 0 || info_txt.yigoumai == 1">
						<view class="phone-num">{{info_txt.phone}}</view>
						<view class="shengyu">剩余免费次数：<text class="cishu">{{cishu.shengyu}}次</text> </view>
					</view>
					<view class="" v-if="cishu.shengyu == 0 || info_txt.yigoumai == 0">
						<view class="goumai">您当前免费次数为{{cishu.shengyu}}次，立即去购买</view>
					</view>
					<view class="phone-w">
						<u-button :text="cishu_num" shape="circle" @click="queding" color="#FF6400"></u-button>
					</view>
					<view class="d-flex align-items huiyuan_kaitong" v-if="cishu.shengyu == 0 || info_txt.yigoumai == 0">
						<view class="huiyuan" @click="chengwei_huiyuan">成为会员</view>
						<view class="pass" @click="show_pop = false">我再看看</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getXinxiContent,
		setlike,
		getCommentList,
		getCishu,
		payorder,
		index
	} from '@/api/user.js'
	export default {
		data() {
			return {
				count: 5,
				star: 0,
				show_pop: false,
				content_id: '',
				info_txt: {},
				pinglunlist: [],
				dianzan_t:'',
				cishu: {},
				cishu_num: '确定',
				group_id: '',
			}
		},
		async onLoad(option) {
			this.group_id = option.id
			this.content_id = option.content_id
			await this.get_zhaogong_info()
			this.get_pinglun_list()
			await this.get_cishu()
			this.get_money()
		},
		methods: {
			// 获取信息详情
			async get_zhaogong_info() {
				var data = {
					id: this.content_id,
				}
				await getXinxiContent(data).then(res => {
					console.log("获取招工信息详情", res);
					if (res.code == 1) {
						this.info_txt = res.data.content_info
					}
				})
			},
			// 获取免费次数
			async get_cishu() {
				await getCishu({}).then(res => {
					console.log("剩余免费次数", res);
					if (res.code == 1) {
						this.cishu = res.data
					}
				})
			},
			// 点赞
			dianzan_click() {
				var data = {
					content_id: this.info_txt.id
				}
				setlike(data).then(res => {
					console.log("点赞文章", res);
					this.get_zhaogong_info()
				})
			},
			// 成为会员
			chengwei_huiyuan(){
				uni.navigateTo({
					url:'/pagesB/huiyuan/kaitong_huiyuan?id=' + this.info_txt.id
				})
			},
			pinglun_list(e) {
				uni.navigateTo({
					url: '/pagesA/pinglun/pinglun?id=' + e.id
				})
			},
			// 获取评论列表
			get_pinglun_list() {
				var data = {
					content_id: this.content_id,
					// comment_id:
				}
				getCommentList(data).then(res => {
					console.log("获取评论列表");
					if (res.code == 1) {
						this.pinglunlist = res.data.list
					}
				})
			},
			go_black() {
				if (typeof this.$util.prePage().get_jianfang_list == 'function') {
					this.$util.prePage().get_jianfang_list()
				}
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			
			queding() {
				this.show_pop = false
				var data = {
					type: 1,
					content_id: this.info_txt.id
				}
				payorder(data).then(res => {
					console.log("获取支付", res);
					if (res.code == 1) {
						if (res.data.is_zhifu == 1) {
							uni.requestPayment({
								appId: res.data.pay_info.appId,
								nonceStr: res.data.pay_info.nonceStr,
								package: res.data.pay_info.package,
								paySign: res.data.pay_info.paySign,
								signType: res.data.pay_info.signType,
								timeStamp: res.data.pay_info.timestamp,
								success(res) {
									console.log("支付结果", res);
									if (res.errMsg == "requestPayment:ok") {
										uni.showToast({
											title: '支付成功',
											icon: 'none'
										})
										// setTimeout(() => {
										// 	if (typeof 'that.$util.prePage().getAllOrder' ==
										// 		"function") {
										// 		that.$util.prePage()
										// 			.getAllOrder()
										// 	}
										// 	uni.navigateBack({
										// 		delta: 1
										// 	})
										// }, 1000)
									}
								},
								fail(e) {
									console.log("支付shibai", e);
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
								}
							})
						} else {
							this.get_cishu()
						}
					}
				})
			
			},
			// 跳转到回复评论页面
			huifu_go() {
				uni.navigateTo({
					url: '/pagesA/pinglun/pinglun'
				})
			},
			get_money() {
				index({}).then(res => {
					console.log("获取购买费用", res);
					if (res.code == 1) {
						this.money = res.data.xieyi.viewone
						if (this.cishu.shengyu == 0) {
							this.cishu_num = '立即购买(' + res.data.xieyi.viewone + '元/条)'
						}
					}
				})
			},
			get_phone() {
				if(!uni.getStorageSync('token')) {
					uni.showToast({
						title:'请登录后查看',
						icon:'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},500)
				}else {
					this.show_pop = true
				}
			},
		}
	}
</script>

<style>
	page {
		padding-bottom: 130rpx;
	}
	.shenfen {
		display: flex;
		font-size: 24rpx;
		color: #FF4D4F;
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
		background: #FDF2F2;
		margin-top: 8rpx;
	}

	/* 获取电话弹窗 */
	.huiyuan_kaitong {
		width: 480rpx;
		margin: auto;
		justify-content: center;
		padding-bottom: 20rpx;
	}
	.goumai {
		width: 315rpx;
		margin: auto;
		font-size: 30rpx;
		line-height: 42rpx;
		text-align: center;
		color: #4E5969;
	}
	
	.huiyuan,
	.pass {
		font-size: 30rpx;
		font-weight: normal;
		color: #FF6400;
		margin: 0 20rpx;
	}
	
	.pass {
		color: #86909C !important;
	
	}
	.get_phone {
		width: 540rpx;
	}

	.phone-t {
		font-size: 34rpx;
		font-weight: 600;
		text-align: center;
		color: #1D2129;
		margin-bottom: 53rpx;
		padding-top: 40rpx;
	}

	.phone-num {
		font-size: 56rpx;
		font-weight: 600;
		text-align: center;
		color: #232323;
		margin-bottom: 30rpx;
	}

	.shengyu {
		font-size: 28rpx;
		font-weight: normal;
		color: #999999;
		text-align: center;
	}

	.cishu {
		font-size: 28rpx;
		font-weight: normal;
		color: #232323 !important;
	}

	.phone-w {
		width: 480rpx;
		margin: auto;
		margin-top: 29rpx;
		padding-bottom: 30rpx;
	}

	/* end */
	.foot_btn-but {
		width: 670rpx;
		margin: auto;
	}

	.foot_btn {
		width: 750rpx;
		height: 128rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 23rpx 0rpx #999;
	}

	.content-zz {
		font-size: 24rpx;
		color: #666666;
		margin: 20rpx 0;
	}

	.zuozhe-tit {
		font-size: 24rpx;
		font-weight: normal;
		color: #333333;
	}

	.zuozhe-btn {
		width: 65rpx;
		height: 35rpx;
		font-size: 18rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		text-align: center;
		border-radius: 16rpx;
		background: #FF6400;
		margin-left: 10rpx;
	}

	.juse-huifu {
		justify-content: flex-end;
	}

	.zuozhe {
		width: 516rpx;
		height: 170rpx;
		border-radius: 6rpx;
		opacity: 1;
		background: #F6F6F6;
		margin-top: 20rpx;
		margin-left: 110rpx;
		padding: 30rpx 0 0 30rpx;
	}

	.huifu-list {
		width: 560rpx;
		margin-top: 10rpx;
		margin-right: 20rpx;
	}

	.hf-btn {
		width: 65rpx;
		height: 35rpx;
		font-size: 18rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		text-align: center;
		border-radius: 16rpx;
		background: #C7C7C7;
		margin-left: 10rpx;
	}

	.huifu-content {
		max-width: 580rpx;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 40rpx;
		text-align: justify;
		/* 浏览器可能不支持 */
		letter-spacing: 0.18rpx;
		color: #666666;
	}

	.time {
		font-size: 24rpx;
		font-weight: normal;
		color: #999999;
	}

	.hf-name {
		font-size: 24rpx;
		font-weight: normal;
		color: #333333;
	}

	.hf-avart {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		display: block;
		margin-right: 10rpx;
	}

	.huifu-w {
		width: 630rpx;
		margin: auto;
	}

	.huifu {
		width: 690rpx;
		margin: 30rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx 0;
	}

	.juese_name-xz {
		font-size: 30rpx;
		font-weight: normal;
		color: #FF6400;
		margin-right: 40rpx;
	}

	.juese_name {
		font-size: 30rpx;
		font-weight: normal;
		color: #1D2129;
		margin-right: 40rpx;
	}

	.sanjiao {
		width: 40rpx;
		display: block;
	}

	.juese {
		width: 690rpx;
		margin: 30rpx auto;
	}

	.pinglun-magin {
		margin-right: 78rpx;
	}

	.pinglun {
		width: 630rpx;
		margin: auto;
		margin-top: 20rpx;
	}

	.hour_time {
		font-size: 26rpx;
		color: #999999;
	}

	.plnum_xz {
		font-size: 26rpx;
		color: #FF4D4F;
		margin-left: 10rpx;
	}

	.plnum {
		font-size: 26rpx;
		color: #9E9E9E;
		margin-left: 10rpx;
	}

	.pinlun {
		width: 45rpx;
		display: block;
	}

	.quyu {
		font-size: 24rpx;
		color: #999999;
		margin-right: 25rpx;
	}

	.company-t {
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 20rpx;
	}

	.type-list {
		margin-left: 24rpx;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.type-list-m {
		padding: 7rpx 15rpx;
		font-size: 20rpx;
		color: #545454;
		border-radius: 4.5px;
		background: #F5F5F5;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}

	.geyan {
		width: 650rpx;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 42rpx;
		color: #333333;
		margin: auto;
		margin-top: 25rpx;
	}

	.shejishi {
		width: 80rpx;
		height: 32rpx;
		border-radius: 4rpx;
		opacity: 1;
		margin-left: 10rpx;
		background: rgba(75, 138, 255, 0.08);
		border: 1.07px solid #CBDDFF;
		font-size: 20rpx;
		color: #4B8AFF;
		text-align: center;
	}

	.name-t {
		font-size: 24rpx;
		font-weight: 600;
		color: #444;
	}

	.touxiang-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: block;
		margin-right: 20rpx;
	}

	.avart-img {
		padding: 30rpx 0 0 24rpx;
	}

	.gs-list {
		width: 640rpx;
		margin: auto;
		padding-top: 30rpx;
	}

	.scroll-view-item_H {
		width: 690rpx;
		padding-bottom: 30rpx;
		border-radius: 10rpx;
		background: #fff;
		margin: 20rpx auto;
	}

	page {
		background-color: #F7F8FB;
	}
</style>